<!DOCTYPE html>
<html class="x-admin-sm" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link th:href="@{/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/cookie.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12  layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="" id="" placeholder="输入角色名称" autocomplete="off"
                           class="layui-input">
                </div>
                <button class="layui-btn" lay-submit="" lay-filter=""><i class="layui-icon">&#xe615;</i>搜索</button>

            </div>
        </form>

        <input type="hidden" id="rStatus">
        <table class="layui-table" id="roleTable" lay-filter="test">
        </table>
        <div class="page">
            <div>
                <a class="prev" href="">&lt;&lt;</a>
                <a class="num" href="">1</a>
                <span class="current">2</span>
                <a class="num" href="">3</a>
                <a class="num" href="">489</a>
                <a class="next" href="">&gt;&gt;</a>
            </div>
        </div>
    </div>
</div>


<div class="form-group" style="display:none;" id="popRule">
    <label class="col-sm-3 control-label">菜单权限</label>
    <div class="col-sm-8">
        <div id="menuTrees" class="ztree"></div>
    </div>
</div>


<!--隐藏增加页面,id和渲染的table进行了区分-->
<div class="layui-row" id="popAdd" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="addForm" action="" style="margin-top:20px">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="text" name="roleName" id="roleName" required lay-verify="required" autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色字符</label>
                <div class="layui-input-block">
                    <input type="text" name="roleKey" id="roleKey" required lay-verify="required" autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    角色状态
                </label>
                <div class="layui-input-inline" id="radioStatus">
                    <input type="radio" value="0" name="status" title="正常" checked="checked"/>
                    <input type="radio" value="1" name="status" title="停用"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="remark" id="remark" autocomplete="off"
                           placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit" lay-submit="" lay-filter="addSave">确认提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/js/ry-ui.js}"></script>
<script th:src="@{/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script>
    window.onload = function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });
        //获取表格中指定列的值传递给新修改弹窗
        layui.use(['layer', 'table', 'form', 'jquery'], function () {
            var $ = layui.$,
                layer = layui.layer,
                form = layui.form;
            var table = layui.table;
            //渲染表格
            var tableIns = table.render({
                id: 'tableId'
                , elem: '#roleTable'
                , height: 400
                , toolbar: '#toolbarDemo'
                , url: '/role/list' //数据接口
                , parseData: function (res) {
                    var data = res.data;
                    for (var index in data) {
                        switch (data[index]["status"]) {
                            case "0":
                                data[index]["status"] = "正常";
                                break;
                            case "1":
                                data[index]["status"] = "停用";
                                break;
                        }
                    }
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": data //解析数据列表
                    }
                }
                , page: true //开启分页
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'roleId', title: '角色编号', width: '15%', sort: true, fixed: 'left', align: 'center'}
                        , {field: 'roleName', title: '角色名称', width: '15%', sort: true, align: 'center'}
                        , {field: 'roleKey', title: '权限字符', width: '15%', align: 'center'}
                        , {field: 'status', title: '角色状态', width: '15%', align: 'center'}
                        , {field: 'remark', title: '备注', width: '15%', align: 'center'}
                        , {field: 'roleEdit', title: '操作', toolbar: '#edit', width: '40%'}
                    ]
                ]
                , done: function (res, curr, count) {
                    table.on('tool(test)', function (obj) {
                        //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"

                        var data = obj.data; //获得当前行所有数据
                        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                        var status = data['status'];
                        switch (status) {
                            case "正常":
                                status = 0;
                                break;
                            case "停用":
                                status = 1;
                                break;
                        }
                        $("#rStatus").val(status);
                        //修改信息
                        if (layEvent == "edit") {
                            editRole("修改角色信息", "/role/roleEdit", 350, 370, data);
                        }
                        else if (layEvent == "del") {
                            layer.confirm("确定删除吗？", function (index) {

                                $.post("/role/remove", {'ids': data["roleId"]}, function (res) {
                                    console.log(obj);
                                    if (res.status == 0) {
                                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                        layer.alert("删除成功", {icon: 5})
                                    }
                                    else {
                                        layer.alert("删除失败", {icon: 5})
                                    }
                                });
                                layer.close(index);
                                //向服务端发送删除指令
                            })
                        } else if (layEvent == 'roleEdit') {
                            editRule(data.roleId);
                        }
                    });
                }//end done

            });//end table render


            //修改角色信息弹窗
            function editRule(roleId) {
                console.log(roleId);
                //data为选中行的房间信息
                var w = ($(window).width() * 0.9);
                var h = ($(window).height() - 50);
                var index = layer.open({
                    type: 2,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: false,
                    content:"/role/roleRule",
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find("#roleId").val(roleId);

                    }

                });
            }//endEditRule


            //修改角色信息弹窗
            function editRole(title, url, w, h, data) {

                if (w == null || w == '') {
                    w = ($(window).width() * 0.9);
                }
                ;
                if (h == null || h == '') {
                    h = ($(window).height() - 50);
                }
                ;
                var index = layer.open({
                    type: 2,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: url,
                    success: function (layero, index) {
                        //在新窗口保留之前的值，在有值的基础上修改,body为子窗口
                        var body = layer.getChildFrame('body', index);
                        //表格渲染后获取指定行数据
                        body.find("#roleId").val(data["roleId"]);
                        body.find("#roleName").val(data["roleName"]);
                        body.find("#roleKey").val(data["roleKey"]);
                        body.find("#status").val(data["status"]);
                        body.find("#remark").val(data["remark"]);
                    }

                });
            }//endEditRole


            //批量删除
            table.on("toolbar(test)", function (obj) {

                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event == 'delAll') {
                    layer.confirm('确定删除吗？', function () {
                        var arr = [];
                        $.each(checkStatus.data, function (idx, obj) {
                            //获得所有id
                            arr.push(obj.roleId);
                        });
                        // 异步操作
                        $.post("/role/remove", {'ids': arr.toString()}, function (res) {
                            if (res.status == 0) {
                                layer.msg("删除成功", {icon: 5})
                                tableIns.reload();
                            }
                            else {
                                layer.alert("修改失败", {icon: 5})
                            }
                        });
                        //layer.close(index);
                    })
                }
            });


            /*增加按钮页面*/
            $('#addBut').on('click', function () {

                var w = ($(window).width() * 0.9);
                var h = ($(window).height() - 50);
                layer.open({
                    type: 1,
                    area: [w + 'px', h + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: "添加",
                    content: $("#popAdd")
                });
            });

            /*增加按钮保存*/
            form.on('submit(addSave)', function () {
                $.ajax({
                    url: '/role/add',
                    type: 'POST',
                    data: $('#addForm').serialize(),
                    success: function (res) {

                        if (res.status == 0) {
                            /*   layer.closeAll('loading');*/
                            layer.load(2);
                            layer.msg("增加成功", {icon: 6});
                            //   layer.closeAll();//关闭所有的弹出层
                            tableIns.reload();

                        } else {
                            layer.msg("增加失败", {icon: 5});
                        }
                    }
                })
            })


        });//end layuiUse


    }
</script>
<script type="text/html" id="edit">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="system:role:edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="system:role:remove">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="roleEdit">权限配置</a>
</script>
<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="delAll" shiro:hasPermission="system:role:remove"><i
                class="layui-icon"></i>批量删除
        </button>
        <button class="layui-btn add2" id="addBut" lay-filter="" shiro:hasPermission="system:role:add" data-type=""><i
                class="layui-icon">&#xe61f;</i>添加
        </button>
    </div>
</script>

</body>

</html>